<!DOCTYPE html><html class=split lang=en-US-x-hixie><script src=../link-fixup.js defer=""></script>
<!-- Mirrored from html.spec.whatwg.org/dev/introduction.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 10 Sep 2025 08:36:24 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<meta charset=utf-8><meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name=viewport><title>HTML Standard, Edition for Web Developers</title><meta content=#3c790a name=theme-color><meta content="light dark" name=color-scheme><link rel=stylesheet href=../../resources.whatwg.org/standard-shared-with-dev.css crossorigin=""><link rel=icon href=https://resources.whatwg.org/logo.svg crossorigin=""><link rel=stylesheet href=styles.css crossorigin=""><script>
   function toggleStatus(div) {
     div.parentNode.classList.toggle('wrapped');
   }
   function setLinkFragment(link) {
     link.hash = location.hash;
   }
  </script><body>
  <script async="" src=search.js></script>
  
  
  <header id=head class="head with-buttons">
   <a href=https://whatwg.org/ class=logo><img width=100 alt=WHATWG crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/logo.svg height=100></a>
   
   <hgroup><h1><a rel=home href=index.html>HTML: The Living Standard</a></h1><p id=dev-edition-h2>Edition for Web Developers — Last Updated <span class=pubdate>10 September 2025</span></hgroup>
   

   <div id=search>
    <input placeholder="Search. Press '/'" autocomplete=off name=query id=query type=search>
    <ol id=results></ol>
   </div>
  </header>

  

  

  

  
  

  
  

  

  <nav><a href=index.html>Table of Contents</a> — <a href=infrastructure.html>2 Common infrastructure →</a></nav><ol class=toc><li><a href=introduction.html#introduction><span class=secno>1</span> Introduction</a><ol><li><a href=introduction.html#is-this-html5?><span class=secno>1.1</span> Is this HTML5?</a><li><a href=introduction.html#background><span class=secno>1.2</span> Background</a><li><a href=introduction.html#audience><span class=secno>1.3</span> Audience</a><li><a href=introduction.html#scope><span class=secno>1.4</span> Scope</a><li><a href=introduction.html#history-2><span class=secno>1.5</span> History</a><li><a href=introduction.html#design-notes><span class=secno>1.6</span> Design notes</a><ol><li><a href=introduction.html#extensibility><span class=secno>1.6.1</span> Extensibility</a></ol><li><a href=introduction.html#html-vs-xhtml><span class=secno>1.7</span> HTML vs XML syntax</a><li><a href=introduction.html#structure-of-this-specification><span class=secno>1.8</span> Structure of this specification</a><ol><li><a href=introduction.html#typographic-conventions><span class=secno>1.8.1</span> Typographic conventions</a></ol><li><a href=introduction.html#a-quick-introduction-to-html><span class=secno>1.9</span> A quick introduction to HTML</a><ol><li><a href=introduction.html#writing-secure-applications-with-html><span class=secno>1.9.1</span> Writing secure applications with HTML</a><li><a href=introduction.html#common-pitfalls-to-avoid-when-using-the-scripting-apis><span class=secno>1.9.2</span> Common pitfalls to avoid when using the scripting APIs</a><li><a href=introduction.html#how-to-catch-mistakes-when-writing-html:-validators-and-conformance-checkers><span class=secno>1.9.3</span> How to catch mistakes when writing HTML: validators and conformance checkers</a></ol><li><a href=introduction.html#conformance-requirements-for-authors><span class=secno>1.10</span> Conformance requirements for authors</a><ol><li><a href=introduction.html#presentational-markup><span class=secno>1.10.1</span> Presentational markup</a><li><a href=introduction.html#syntax-errors><span class=secno>1.10.2</span> Syntax errors</a><li><a href=introduction.html#restrictions-on-content-models-and-on-attribute-values><span class=secno>1.10.3</span> Restrictions on content models and on attribute values</a></ol><li><a href=introduction.html#suggested-reading><span class=secno>1.11</span> Suggested reading</a></ol></ol><h2 id=introduction><span class=secno>1</span> Introduction<a href=#introduction class=self-link></a></h2>

  


  <h3 id=is-this-html5?><span class=secno>1.1</span> Is this HTML5?<a href=#is-this-html5? class=self-link></a></h3>

  

  <p>In short: Yes.</p>

  <p>In more length: the term "HTML5" is widely used as a buzzword to refer to modern web
  technologies, many of which (though by no means all) are developed at the WHATWG. This document is
  one such; others are available from <a href=https://spec.whatwg.org/>the WHATWG Standards
  overview</a>.</p>


  <h3 id=background><span class=secno>1.2</span> Background<a href=#background class=self-link></a></h3>

  

  <p>HTML is the World Wide Web's core markup language. Originally, HTML was primarily designed as a
  language for semantically describing scientific documents. Its general design, however, has
  enabled it to be adapted, over the subsequent years, to describe a number of other types of
  documents and even applications.</p>


  <h3 id=audience><span class=secno>1.3</span> Audience<a href=#audience class=self-link></a></h3>

  

  <p>This specification is intended for authors of documents and scripts that use the features
  defined in this specification.</p>

  <p>This document is probably not suited to readers who do not already have at least a passing
  familiarity with web technologies, as in places it sacrifices clarity for precision, and brevity
  for completeness. More approachable tutorials and authoring guides can provide a gentler
  introduction to the topic.</p>

  <p>In particular, familiarity with the basics of DOM is necessary for a complete understanding of
  some of the more technical parts of this specification. An understanding of Web IDL, HTTP, XML,
  Unicode, character encodings, JavaScript, and CSS will also be helpful in places but is not
  essential.</p>


  <h3 id=scope><span class=secno>1.4</span> Scope<a href=#scope class=self-link></a></h3>

  

  <p>This specification is limited to providing a semantic-level markup language and associated
  semantic-level scripting APIs for authoring accessible pages on the web ranging from static
  documents to dynamic applications.</p>

  <p>The scope of this specification does not include providing mechanisms for media-specific
  customization of presentation (although default rendering rules for web browsers are included at
  the end of this specification, and several mechanisms for hooking into CSS are provided as part of
  the language).</p>

  <p>The scope of this specification is not to describe an entire operating system. In particular,
  hardware configuration software, image manipulation tools, and applications that users would be
  expected to use with high-end workstations on a daily basis are out of scope. In terms of
  applications, this specification is targeted specifically at applications that would be expected
  to be used by users on an occasional basis, or regularly but from disparate locations, with low
  CPU requirements. Examples of such applications include online purchasing systems, searching
  systems, games (especially multiplayer online games), public telephone books or address books,
  communications software (email clients, instant messaging clients, discussion software), document
  editing software, etc.</p>


  <h3 id=history-2><span class=secno>1.5</span> History<a href=#history-2 class=self-link></a></h3>

  

  <p>For its first five years (1990-1995), HTML went through a number of revisions and experienced a
  number of extensions, primarily hosted first at CERN, and then at the IETF.</p>

  <p>With the creation of the W3C, HTML's development changed venue again. A first abortive attempt
  at extending HTML in 1995 known as HTML 3.0 then made way to a more pragmatic approach known as
  HTML 3.2, which was completed in 1997. HTML4 quickly followed later that same year.</p>

  <p>The following year, the W3C membership decided to stop evolving HTML and instead begin work on
  an XML-based equivalent, called XHTML.  This
  effort started with a reformulation of HTML4 in XML, known as XHTML 1.0, which added no new
  features except the new serialization, and which was completed in 2000. After XHTML 1.0, the W3C's
  focus turned to making it easier for other working groups to extend XHTML, under the banner of
  XHTML Modularization. In parallel with this, the W3C also worked on a new language that was not
  compatible with the earlier HTML and XHTML languages, calling it XHTML2.</p>

  <p>Around the time that HTML's evolution was stopped in 1998, parts of the API for HTML developed
  by browser vendors were specified and published under the name DOM Level 1 (in 1998) and DOM Level
  2 Core and DOM Level 2 HTML (starting in 2000 and culminating in 2003). These efforts then petered
  out, with some DOM Level 3 specifications published in 2004 but the working group being closed
  before all the Level 3 drafts were completed.</p>

  <p>In 2003, the publication of XForms, a technology which was positioned as the next generation of
  web forms, sparked a renewed interest in evolving HTML itself, rather than finding replacements
  for it. This interest was borne from the realization that XML's deployment as a web technology was
  limited to entirely new technologies (like RSS and later Atom), rather than as a replacement for
  existing deployed technologies (like HTML).</p>

  <p>A proof of concept to show that it was possible to extend HTML4's forms to provide many of the
  features that XForms 1.0 introduced, without requiring browsers to implement rendering engines
  that were incompatible with existing HTML web pages, was the first result of this renewed
  interest. At this early stage, while the draft was already publicly available, and input was
  already being solicited from all sources, the specification was only under Opera Software's
  copyright.</p>

  <p>The idea that HTML's evolution should be reopened was tested at a W3C workshop in 2004, where
  some of the principles that underlie the HTML5 work (described below), as well as the
  aforementioned early draft proposal covering just forms-related features, were presented to the
  W3C jointly by Mozilla and Opera. The proposal was rejected on the grounds that the proposal
  conflicted with the previously chosen direction for the web's evolution; the W3C staff and
  membership voted to continue developing XML-based replacements instead.</p>

  <p>Shortly thereafter, Apple, Mozilla, and Opera jointly announced their intent to continue
  working on the effort under the umbrella of a new venue called the WHATWG. A public mailing list
  was created, and the draft was moved to the WHATWG site. The copyright was subsequently amended to
  be jointly owned by all three vendors, and to allow reuse of the specification.</p>

  <p>The WHATWG was based on several core principles, in particular that technologies need to be
  backwards compatible, that specifications and implementations need to match even if this means
  changing the specification rather than the implementations, and that specifications need to be
  detailed enough that implementations can achieve complete interoperability without
  reverse-engineering each other.</p>

  <p>The latter requirement in particular required that the scope of the HTML5 specification include
  what had previously been specified in three separate documents: HTML4, XHTML1, and DOM2 HTML. It
  also meant including significantly more detail than had previously been considered the norm.</p>

  <p>In 2006, the W3C indicated an interest to participate in the development of HTML5 after all,
  and in 2007 formed a working group chartered to work with the WHATWG on the development of the
  HTML5 specification. Apple, Mozilla, and Opera allowed the W3C to publish the specification under
  the W3C copyright, while keeping a version with the less restrictive license on the WHATWG
  site.</p>

  <p>For a number of years, both groups then worked together. In 2011, however, the groups came to
  the conclusion that they had different goals: the W3C wanted to publish a "finished" version of
  "HTML5", while the WHATWG wanted to continue working on a Living Standard for HTML, continuously
  maintaining the specification rather than freezing it in a state with known problems, and adding
  new features as needed to evolve the platform.</p>

  <p>In 2019, the WHATWG and W3C <a href=https://www.w3.org/blog/news/archives/7753>signed an
  agreement</a> to collaborate on a single version of HTML going forward: this document.</p>



  <h3 id=design-notes><span class=secno>1.6</span> Design notes<a href=#design-notes class=self-link></a></h3>

  

  <p>It must be admitted that many aspects of HTML appear at first glance to be nonsensical and
  inconsistent.</p>

  <p>HTML, its supporting DOM APIs, as well as many of its supporting technologies, have been
  developed over a period of several decades by a wide array of people with different priorities
  who, in many cases, did not know of each other's existence.</p>

  <p>Features have thus arisen from many sources, and have not always been designed in especially
  consistent ways. Furthermore, because of the unique characteristics of the web, implementation
  bugs have often become de-facto, and now de-jure, standards, as content is often unintentionally
  written in ways that rely on them before they can be fixed.</p>

  <p>Despite all this, efforts have been made to adhere to certain design goals. These are described
  in the next few subsections.</p>


  



  <h4 id=extensibility><span class=secno>1.6.1</span> Extensibility<a href=#extensibility class=self-link></a></h4>

  

  <p>HTML has a wide array of extensibility mechanisms that can be used for adding semantics in a
  safe manner:</p>

  <ul><li><p>Authors can use the <code id=extensibility:classes><a href=dom.html#classes>class</a></code> attribute to extend elements,
   effectively creating their own elements, while using the most applicable existing "real" HTML
   element, so that browsers and other tools that don't know of the extension can still support it
   somewhat well. This is the tack used by microformats, for example.<li><p>Authors can include data for inline client-side scripts or server-side site-wide scripts
   to process using the <code id=extensibility:attr-data-*><a href=dom.html#attr-data-*>data-*=""</a></code> attributes. These are guaranteed
   to never be touched by browsers, and allow scripts to include data on HTML elements that scripts
   can then look for and process.<li><p>Authors can use the <code id=extensibility:the-meta-element><a href=semantics.html#the-meta-element>&lt;meta name="" content=""></a></code> mechanism to
   include page-wide metadata.<li><p>Authors can use the <code id=extensibility:attr-hyperlink-rel><a href=links.html#attr-hyperlink-rel>rel=""</a></code> mechanism to annotate
   links with specific meanings by registering <a href=links.html#concept-rel-extensions id=extensibility:concept-rel-extensions>extensions to
   the predefined set of link types</a>. This is also used by microformats.<li><p>Authors can embed raw data using the <code id=extensibility:the-script-element><a href=scripting.html#the-script-element>&lt;script type=""></a></code>
   mechanism with a custom type, for further handling by inline or server-side scripts.<li><p>Authors can extend APIs using the JavaScript prototyping mechanism. This is widely used by
   script libraries, for instance.<li><p>Authors can use the microdata feature (the <code id=extensibility:attr-itemscope><a href=microdata.html#attr-itemscope>itemscope=""</a></code> and <code id=extensibility:names:-the-itemprop-attribute><a href=microdata.html#names:-the-itemprop-attribute>itemprop=""</a></code>
   attributes) to embed nested name-value pairs of data to be shared with other applications and
   sites.<li><p>Authors can define, share, and use <a href=custom-elements.html#custom-element id=extensibility:custom-element>custom elements</a>
   to extend the vocabulary of HTML. The requirements of <a href=custom-elements.html#valid-custom-element-name id=extensibility:valid-custom-element-name>valid custom element names</a> ensure forward compatibility (since no elements will be
   added to HTML, SVG, or MathML with hyphen-containing local names in the future).</ul>




  <h3 id=html-vs-xhtml><span class=secno>1.7</span> HTML vs XML syntax<a href=#html-vs-xhtml class=self-link></a></h3>

  

  <p>This specification defines an abstract language for describing documents and applications, and
  some APIs for interacting with in-memory representations of resources that use this language.</p>

  <p>The in-memory representation is known as "DOM HTML", or "the DOM" for short.</p>

  <p>There are various concrete syntaxes that can be used to transmit resources that use this
  abstract language, two of which are defined in this specification.</p>

  <p>The first such concrete syntax is the HTML syntax. This is the format suggested for most
  authors. It is compatible with most legacy web browsers. If a document is transmitted with the
  <code>text/html</code> <a id=html-vs-xhtml:mime-type href=https://mimesniff.spec.whatwg.org/#mime-type data-x-internal=mime-type>MIME type</a>, then it will be processed as an HTML document by
  web browsers. This specification defines the latest HTML syntax, known simply as "HTML".</p>

  <p>The second concrete syntax is XML. When a document is transmitted with an <a id=html-vs-xhtml:xml-mime-type href=https://mimesniff.spec.whatwg.org/#xml-mime-type data-x-internal=xml-mime-type>XML MIME
  type</a>, such as <code>application/xhtml+xml</code>, then it is treated as an XML document by
  web browsers, to be parsed by an XML processor. Authors are reminded that the processing for XML
  and HTML differs; in particular, even minor syntax errors will prevent a document labeled as XML
  from being rendered fully, whereas they would be ignored in the HTML syntax.</p>

  <p class=note>The XML syntax for HTML was formerly referred to as "XHTML", but this
  specification does not use that term (among other reasons, because no such term is used for the
  HTML syntaxes of MathML and SVG).</p>

  <p>The DOM, the HTML syntax, and the XML syntax cannot all represent the same content. For
  example, namespaces cannot be represented using the HTML syntax, but they are supported in the DOM
  and in the XML syntax. Similarly, documents that use the <code id=html-vs-xhtml:the-noscript-element><a href=scripting.html#the-noscript-element>noscript</a></code> feature can be
  represented using the HTML syntax, but cannot be represented with the DOM or in the XML syntax.
  Comments that contain the string "<code>--></code>" can only be represented in the
  DOM, not in the HTML and XML syntaxes.</p>


  <h3 id=structure-of-this-specification><span class=secno>1.8</span> Structure of this specification<a href=#structure-of-this-specification class=self-link></a></h3>

  

  <p>This specification is divided into the following major sections:</p>

  <dl><dt><a href=#introduction>Introduction</a><dd>Non-normative materials providing a context for the HTML standard.<dt><a href=infrastructure.html#infrastructure>Common infrastructure</a><dd>The conformance classes, algorithms, definitions, and the common underpinnings of the rest of
   the specification.<dt><a href=dom.html#dom>Semantics, structure, and APIs of HTML documents</a><dd>Documents are built from elements. These elements form a tree using the DOM. This section
   defines the features of this DOM, as well as introducing the features common to all elements, and
   the concepts used in defining elements.<dt><a href=semantics.html#semantics>The elements of HTML</a><dd>Each element has a predefined meaning, which is explained in this section. Rules for authors
   on how to use the element are also given. This includes large signature features of HTML such
   as video playback and subtitles, form controls and form submission, and a 2D graphics API known
   as the HTML canvas.<dt><a href=microdata.html#microdata>Microdata</a><dd>This specification introduces a mechanism for adding machine-readable annotations to
   documents, so that tools can extract trees of name-value pairs from the document. This section
   describes this mechanism. This section also defines some sample Microdata vocabularies
   for contact information, calendar events, and licensing works.<dt><a href=interaction.html#editing>User interaction</a><dd>HTML documents can provide a number of mechanisms for users to interact with and modify
   content, which are described in this section, such as how focus works, and drag-and-drop.<dt><a href=browsers.html#browsers>Loading web pages</a><dd>HTML documents do not exist in a vacuum — this section defines many of the features
   that affect environments that deal with multiple pages, such as web browsers.<dt><a href=webappapis.html#webappapis>Web application APIs</a><dd>This section introduces basic features for scripting of applications in HTML.<dt><a href=workers.html#workers>Web workers</a><dd>This section defines an API for background threads in JavaScript.<dt><a href=worklets.html#worklets>Worklets</a><dd>This section defines infrastructure for APIs that need to run JavaScript separately from the
   main JavaScript execution environment.<dt><a href=comms.html#comms>The communication APIs</a><dd>This section describes some mechanisms that applications written in HTML can use to
   communicate with other applications from different domains running on the same client. It also
   introduces a server-push event stream mechanism known as Server Sent Events or
   <code>EventSource</code>, and a two-way full-duplex socket protocol for scripts known as Web
   Sockets.<dt><a href=webstorage.html#webstorage>Web storage</a><dd>This section defines a client-side storage mechanism based on name-value pairs.<dt><a href=syntax.html#syntax>The HTML syntax</a><dt><a href=xhtml.html#xhtml>The XML syntax</a><dd>All of these features would be for naught if they couldn't be represented in a serialized
   form and sent to other people, and so these sections define the syntaxes of HTML and XML.</dl>

  <p>There are also some appendices, listing <a href=obsolete.html#obsolete>obsolete features</a> and <a href=#iana>IANA considerations</a>, and several indices.</p>


  



  <h4 id=typographic-conventions><span class=secno>1.8.1</span> Typographic conventions<a href=#typographic-conventions class=self-link></a></h4>

  <p>This is a definition, requirement, or explanation.</p>

  <p class=note>This is a note.</p>

  <p class=example>This is an example.</p>

  <p class=XXX>This is an open issue.</p>

  <p class=warning>This is a warning.</p>

  

  <dl class=domintro><dt><code><var>variable</var> = <var>object</var>.<a href=#x-that id=typographic-conventions:x-that>method</a>([<var>optionalArgument</var>])</code><dd><p>This is a note to authors describing the usage of an interface.</dl>

  <pre><code class='css'><c- c>/* this is a CSS fragment */</c-></code></pre>

  <p>The defining instance of a term is marked up like <dfn id=x-this>this</dfn>. Uses of that
  term are marked up like <a href=#x-this id=typographic-conventions:x-this>this</a> or like <i id=typographic-conventions:x-this-2><a href=#x-this>this</a></i>.</p>

  <p>The defining instance of an element, attribute, or API is marked up like <dfn id=x-that><code>this</code></dfn>. References to that element, attribute, or API are marked up
  like <code id=typographic-conventions:x-that-2><a href=#x-that>this</a></code>.</p>

  <p>Other code fragments are marked up <code>like this</code>.</p>

  <p>Variables are marked up like <var>this</var>.</p>

  

  <p>In some cases, requirements are given in the form of lists with conditions and corresponding
  requirements. In such cases, the requirements that apply to a condition are always the first set
  of requirements that follow the condition, even in the case of there being multiple sets of
  conditions for those requirements. Such cases are presented as follows:</p>

  <dl class=switch><dt>This is a condition
   <dt>This is another condition
   <dd>This is the requirement that applies to the conditions above.

   <dt>This is a third condition
   <dd>This is the requirement that applies to the third condition.
  </dl>




  <h3 id=a-quick-introduction-to-html><span class=secno>1.9</span> A quick introduction to HTML<a href=#a-quick-introduction-to-html class=self-link></a></h3>

  

  <p>A basic HTML document looks like this:</p>

  <pre id=intro-early-example><code class='html'><c- cp>&lt;!DOCTYPE html&gt;</c->
<c- p>&lt;</c-><c- f>html</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;en&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>head</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->Sample page<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>head</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>body</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->Sample page<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->This is a <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;demo.html&quot;</c-><c- p>&gt;</c->simple<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> sample.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- c>&lt;!-- this is a comment --&gt;</c->
 <c- p>&lt;/</c-><c- f>body</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>html</c-><c- p>&gt;</c-></code></pre>

  <p>HTML documents consist of a tree of elements and text. Each element is denoted in the source by
  a <a href=syntax.html#syntax-start-tag id=a-quick-introduction-to-html:syntax-start-tag>start tag</a>, such as "<code>&lt;body></code>", and
  an <a href=syntax.html#syntax-end-tag id=a-quick-introduction-to-html:syntax-end-tag>end tag</a>, such as "<code>&lt;/body></code>".
  (Certain start tags and end tags can in certain cases be <a href=syntax.html#syntax-tag-omission id=a-quick-introduction-to-html:syntax-tag-omission>omitted</a> and are implied by other tags.)</p>

  <p>Tags have to be nested such that elements are all completely within each other, without
  overlapping:</p>

  <pre class=bad><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->This is <c- p>&lt;</c-><c- f>em</c-><c- p>&gt;</c->very <c- p>&lt;</c-><c- f>strong</c-><c- p>&gt;</c->wrong<c- p>&lt;/</c-><c- f>em</c-><c- p>&gt;</c->!<c- p>&lt;/</c-><c- f>strong</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>
  <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->This <c- p>&lt;</c-><c- f>em</c-><c- p>&gt;</c->is <c- p>&lt;</c-><c- f>strong</c-><c- p>&gt;</c->correct<c- p>&lt;/</c-><c- f>strong</c-><c- p>&gt;</c->.<c- p>&lt;/</c-><c- f>em</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c-></code></pre>

  <p>This specification defines a set of elements that can be used in HTML, along with rules about
  the ways in which the elements can be nested.</p>

  <p>Elements can have attributes, which control how the elements work. In the example below, there
  is a <a id=a-quick-introduction-to-html:hyperlink href=links.html#hyperlink>hyperlink</a>, formed using the <code id=a-quick-introduction-to-html:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code> element and its <code id=a-quick-introduction-to-html:attr-hyperlink-href><a href=links.html#attr-hyperlink-href>href</a></code> attribute:</p>

  <pre><code class='html'><c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;demo.html&quot;</c-><c- p>&gt;</c->simple<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-></code></pre>

  <p><a href=syntax.html#syntax-attributes id=a-quick-introduction-to-html:syntax-attributes>Attributes</a> are placed inside the start tag, and consist
  of a <a href=syntax.html#syntax-attribute-name id=a-quick-introduction-to-html:syntax-attribute-name>name</a> and a <a href=syntax.html#syntax-attribute-value id=a-quick-introduction-to-html:syntax-attribute-value>value</a>, separated by an "<code>=</code>" character.
  The attribute value can remain <a href=syntax.html#unquoted>unquoted</a> if it doesn't contain <a id=a-quick-introduction-to-html:space-characters href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII
  whitespace</a> or any of <code>"</code> <code>'</code> <code>`</code> <code>=</code> <code>&lt;</code> or <code>></code>. Otherwise, it has to be quoted using either single or double quotes. The
  value, along with the "<code>=</code>" character, can be omitted altogether if the value
  is the empty string.</p>

  <pre><code class='html'><c- c>&lt;!-- empty attributes --&gt;</c->
<c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>address</c-> <c- e>disabled</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>address</c-> <c- e>disabled</c-><c- o>=</c-><c- s>&quot;&quot;</c-><c- p>&gt;</c->

<c- c>&lt;!-- attributes with a value --&gt;</c->
<c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>address</c-> <c- e>maxlength</c-><c- o>=</c-><c- s>200</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>address</c-> <c- e>maxlength</c-><c- o>=</c-><c- s>&apos;200&apos;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>address</c-> <c- e>maxlength</c-><c- o>=</c-><c- s>&quot;200&quot;</c-><c- p>&gt;</c-></code></pre>

  <p>HTML user agents (e.g., web browsers) then <i>parse</i> this markup, turning it into a DOM
  (Document Object Model) tree. A DOM tree is an in-memory representation of a document.</p>

  <p>DOM trees contain several kinds of nodes, in particular a <code id=a-quick-introduction-to-html:documenttype><a data-x-internal=documenttype href=https://dom.spec.whatwg.org/#interface-documenttype>DocumentType</a></code> node,
  <code id=a-quick-introduction-to-html:element><a data-x-internal=element href=https://dom.spec.whatwg.org/#interface-element>Element</a></code> nodes, <code id=a-quick-introduction-to-html:text><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> nodes, <code id=a-quick-introduction-to-html:comment><a data-x-internal=comment href=https://dom.spec.whatwg.org/#interface-comment>Comment</a></code> nodes, and in some cases
  <code id=a-quick-introduction-to-html:processinginstruction><a data-x-internal=processinginstruction href=https://dom.spec.whatwg.org/#interface-processinginstruction>ProcessingInstruction</a></code> nodes.</p>

  <p>The <a href=#intro-early-example>markup snippet at the top of this section</a> would be
  turned into the following DOM tree:</p>

  <ul class=domTree><li class=t10>DOCTYPE: <code>html</code><li class=t1><code id=a-quick-introduction-to-html:the-html-element><a href=semantics.html#the-html-element>html</a></code> <span class=t2><code id=a-quick-introduction-to-html:attr-lang class="attribute name"><a href=dom.html#attr-lang>lang</a></code>="<code class="attribute value">en</code>"</span><ul><li class=t1><code id=a-quick-introduction-to-html:the-head-element><a href=semantics.html#the-head-element>head</a></code><ul><li class=t3><code id=a-quick-introduction-to-html:text-2><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>#text</a></code>: <span>⏎␣␣</span><li class=t1><code id=a-quick-introduction-to-html:the-title-element><a href=semantics.html#the-title-element>title</a></code><ul><li class=t3><code id=a-quick-introduction-to-html:text-3><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>#text</a></code>: <span>Sample page</span></ul><li class=t3><code id=a-quick-introduction-to-html:text-4><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>#text</a></code>: <span>⏎␣</span></ul><li class=t3><code id=a-quick-introduction-to-html:text-5><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>#text</a></code>: <span>⏎␣</span><li class=t1><code id=a-quick-introduction-to-html:the-body-element><a href=sections.html#the-body-element>body</a></code><ul><li class=t3><code id=a-quick-introduction-to-html:text-6><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>#text</a></code>: <span>⏎␣␣</span><li class=t1><code id=a-quick-introduction-to-html:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code><ul><li class=t3><code id=a-quick-introduction-to-html:text-7><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>#text</a></code>: <span>Sample page</span></ul><li class=t3><code id=a-quick-introduction-to-html:text-8><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>#text</a></code>: <span>⏎␣␣</span><li class=t1><code id=a-quick-introduction-to-html:the-p-element><a href=grouping-content.html#the-p-element>p</a></code><ul><li class=t3><code id=a-quick-introduction-to-html:text-9><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>#text</a></code>: <span>This is a </span><li class=t1><code id=a-quick-introduction-to-html:the-a-element-2><a href=text-level-semantics.html#the-a-element>a</a></code> <span class=t2><code id=a-quick-introduction-to-html:attr-hyperlink-href-2 class="attribute name"><a href=links.html#attr-hyperlink-href>href</a></code>="<code class="attribute value">demo.html</code>"</span><ul><li class=t3><code id=a-quick-introduction-to-html:text-10><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>#text</a></code>: <span>simple</span></ul><li class=t3><code id=a-quick-introduction-to-html:text-11><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>#text</a></code>: <span> sample.</span></ul><li class=t3><code id=a-quick-introduction-to-html:text-12><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>#text</a></code>: <span>⏎␣␣</span><li class=t8><code id=a-quick-introduction-to-html:comment-2><a data-x-internal=comment href=https://dom.spec.whatwg.org/#interface-comment>#comment</a></code>: <span> this is a comment </span><li class=t3><code id=a-quick-introduction-to-html:text-13><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>#text</a></code>: <span>⏎␣⏎</span></ul></ul></ul>

  <p>The <a id=a-quick-introduction-to-html:document-element href=https://dom.spec.whatwg.org/#document-element data-x-internal=document-element>document element</a> of this tree is the <code id=a-quick-introduction-to-html:the-html-element-2><a href=semantics.html#the-html-element>html</a></code> element, which is the
  element always found in that position in HTML documents. It contains two elements,
  <code id=a-quick-introduction-to-html:the-head-element-2><a href=semantics.html#the-head-element>head</a></code> and <code id=a-quick-introduction-to-html:the-body-element-2><a href=sections.html#the-body-element>body</a></code>, as well as a <code id=a-quick-introduction-to-html:text-14><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> node between them.</p>

  <p>There are many more <code id=a-quick-introduction-to-html:text-15><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> nodes in the DOM tree than one would initially expect,
  because the source contains a number of spaces (represented here by "␣") and line breaks
  ("⏎") that all end up as <code id=a-quick-introduction-to-html:text-16><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> nodes in the DOM. However, for historical
  reasons not all of the spaces and line breaks in the original markup appear in the DOM. In
  particular, all the whitespace before <code id=a-quick-introduction-to-html:the-head-element-3><a href=semantics.html#the-head-element>head</a></code> start tag ends up being dropped silently,
  and all the whitespace after the <code id=a-quick-introduction-to-html:the-body-element-3><a href=sections.html#the-body-element>body</a></code> end tag ends up placed at the end of the
  <code id=a-quick-introduction-to-html:the-body-element-4><a href=sections.html#the-body-element>body</a></code>.</p>

  <p>The <code id=a-quick-introduction-to-html:the-head-element-4><a href=semantics.html#the-head-element>head</a></code> element contains a <code id=a-quick-introduction-to-html:the-title-element-2><a href=semantics.html#the-title-element>title</a></code> element, which itself contains a
  <code id=a-quick-introduction-to-html:text-17><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> node with the text "Sample page". Similarly, the <code id=a-quick-introduction-to-html:the-body-element-5><a href=sections.html#the-body-element>body</a></code> element
  contains an <code id=a-quick-introduction-to-html:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-2><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code> element, a <code id=a-quick-introduction-to-html:the-p-element-2><a href=grouping-content.html#the-p-element>p</a></code> element, and a comment.</p>

  <hr>

  <p>This DOM tree can be manipulated from scripts in the page. Scripts (typically in JavaScript)
  are small programs that can be embedded using the <code id=a-quick-introduction-to-html:the-script-element><a href=scripting.html#the-script-element>script</a></code> element or using <a id=a-quick-introduction-to-html:event-handler-content-attributes href=webappapis.html#event-handler-content-attributes>event
  handler content attributes</a>. For example, here is a form with a script that sets the value
  of the form's <code id=a-quick-introduction-to-html:the-output-element><a href=form-elements.html#the-output-element>output</a></code> element to say "Hello World":</p>

  <pre><code class='html'><c- p>&lt;</c-><a id='a-quick-introduction-to-html:the-form-element' href='forms.html#the-form-element'><c- f>form</c-></a> <a href='forms.html#attr-form-name' id='a-quick-introduction-to-html:attr-form-name'><c- e>name</c-></a><c- o>=</c-><c- s>&quot;main&quot;</c-><c- p>&gt;</c->
 Result: <c- p>&lt;</c-><a id='a-quick-introduction-to-html:the-output-element-2' href='form-elements.html#the-output-element'><c- f>output</c-></a> <a href='form-control-infrastructure.html#attr-fe-name' id='a-quick-introduction-to-html:attr-fe-name'><c- e>name</c-></a><c- o>=</c-><c- s>&quot;result&quot;</c-><c- p>&gt;&lt;/</c-><c- f>output</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><a id='a-quick-introduction-to-html:the-script-element-2' href='scripting.html#the-script-element'><c- f>script</c-></a><c- p>&gt;</c->
  <span>document</span><c- p>.</c-><a href='dom.html#dom-document-forms' id='a-quick-introduction-to-html:dom-document-forms'>forms</a><c- p>.</c->main<c- p>.</c-><a href='forms.html#dom-form-elements' id='a-quick-introduction-to-html:dom-form-elements'>elements</a><c- p>.</c->result<c- p>.</c-><a href='form-elements.html#dom-output-value' id='a-quick-introduction-to-html:dom-output-value'>value</a> <c- o>=</c-> <c- t>&apos;Hello World&apos;</c-><c- p>;</c->
 <c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>

  <p>Each element in the DOM tree is represented by an object, and these objects have APIs so that
  they can be manipulated. For instance, a link (e.g. the <code id=a-quick-introduction-to-html:the-a-element-3><a href=text-level-semantics.html#the-a-element>a</a></code> element in the tree above)
  can have its "<code id=a-quick-introduction-to-html:attr-hyperlink-href-3><a href=links.html#attr-hyperlink-href>href</a></code>" attribute changed in several
  ways:</p>

  <pre><code class='js'><c- a>var</c-> a <c- o>=</c-> <span>document</span><c- p>.</c-><a href='dom.html#dom-document-links' id='a-quick-introduction-to-html:dom-document-links'>links</a><c- p>[</c-><c- mf>0</c-><c- p>];</c-> <c- c1>// obtain the first link in the document</c->
a<c- p>.</c-><a href='links.html#dom-hyperlink-href' id='a-quick-introduction-to-html:dom-hyperlink-href'>href</a> <c- o>=</c-> <c- t>&apos;sample.html&apos;</c-><c- p>;</c-> <c- c1>// change the destination URL of the link</c->
a<c- p>.</c-><a href='links.html#dom-hyperlink-protocol' id='a-quick-introduction-to-html:dom-hyperlink-protocol'>protocol</a> <c- o>=</c-> <c- t>&apos;https&apos;</c-><c- p>;</c-> <c- c1>// change just the scheme part of the URL</c->
a<c- p>.</c->setAttribute<c- p>(</c-><c- t>&apos;href&apos;</c-><c- p>,</c-> <c- t>&apos;https://example.com/&apos;</c-><c- p>);</c-> <c- c1>// change the content attribute directly</c-></code></pre>

  <p>Since DOM trees are used as the way to represent HTML documents when they are processed and
  presented by implementations (especially interactive implementations like web browsers), this
  specification is mostly phrased in terms of DOM trees, instead of the markup described above.</p>

  <hr>

  <p>HTML documents represent a media-independent description of interactive content. HTML documents
  might be rendered to a screen, or through a speech synthesizer, or on a braille display. To
  influence exactly how such rendering takes place, authors can use a styling language such as
  CSS.</p>

  <p>In the following example, the page has been made yellow-on-blue using CSS.</p>

  <pre><code class='html'><c- cp>&lt;!DOCTYPE html&gt;</c->
<c- p>&lt;</c-><c- f>html</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;en&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>head</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->Sample styled page<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>style</c-><c- p>&gt;</c->
   <c- f>body</c-> <c- p>{</c-> <c- k>background</c-><c- p>:</c-> <c- kc>navy</c-><c- p>;</c-> <c- k>color</c-><c- p>:</c-> <c- kc>yellow</c-><c- p>;</c-> <c- p>}</c->
  <c- p>&lt;/</c-><c- f>style</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>head</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>body</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->Sample styled page<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->This page is just a demo.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>body</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>html</c-><c- p>&gt;</c-></code></pre>

  <p>For more details on how to use HTML, authors are encouraged to consult tutorials and guides.
  Some of the examples included in this specification might also be of use, but the novice author is
  cautioned that this specification, by necessity, defines the language with a level of detail that
  might be difficult to understand at first.</p>



  <h4 id=writing-secure-applications-with-html><span class=secno>1.9.1</span> Writing secure applications with HTML<a href=#writing-secure-applications-with-html class=self-link></a></h4>

  

  <p>When HTML is used to create interactive sites, care needs to be taken to avoid introducing
  vulnerabilities through which attackers can compromise the integrity of the site itself or of the
  site's users.</p>

  <p>A comprehensive study of this matter is beyond the scope of this document, and authors are
  strongly encouraged to study the matter in more detail. However, this section attempts to provide
  a quick introduction to some common pitfalls in HTML application development.</p>

  <p>The security model of the web is based on the concept of "origins", and correspondingly many of
  the potential attacks on the web involve cross-origin actions. <a href=references.html#refsORIGIN>[ORIGIN]</a></p>

  <dl><dt>Not validating user input<dt>Cross-site scripting (XSS)<dt>SQL injection<dd>
    <p>When accepting untrusted input, e.g. user-generated content such as text comments, values in
    URL parameters, messages from third-party sites, etc, it is imperative that the data be
    validated before use, and properly escaped when displayed. Failing to do this can allow a
    hostile user to perform a variety of attacks, ranging from the potentially benign, such as
    providing bogus user information like a negative age, to the serious, such as running scripts
    every time a user looks at a page that includes the information, potentially propagating the
    attack in the process, to the catastrophic, such as deleting all data in the server.</p>

    <p>When writing filters to validate user input, it is imperative that filters always be
    safelist-based, allowing known-safe constructs and disallowing all other input. Blocklist-based
    filters that disallow known-bad inputs and allow everything else are not secure, as not
    everything that is bad is yet known (for example, because it might be invented in the
    future).</p>

    <div class=example>

     <p>For example, suppose a page looked at its URL's query string to determine what to display,
     and the site then redirected the user to that page to display a message, as in:</p>

     <pre><code class='html'><c- p>&lt;</c-><c- f>ul</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;message.cgi?say=Hello&quot;</c-><c- p>&gt;</c->Say Hello<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;message.cgi?say=Welcome&quot;</c-><c- p>&gt;</c->Say Welcome<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;message.cgi?say=Kittens&quot;</c-><c- p>&gt;</c->Say Kittens<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>ul</c-><c- p>&gt;</c-></code></pre>

     <p>If the message was just displayed to the user without escaping, a hostile attacker could
     then craft a URL that contained a script element:</p>

     <pre>https://example.com/message.cgi?say=%3Cscript%3Ealert%28%27Oh%20no%21%27%29%3C/script%3E</pre>

     <p>If the attacker then convinced a victim user to visit this page, a script of the attacker's
     choosing would run on the page. Such a script could do any number of hostile actions, limited
     only by what the site offers: if the site is an e-commerce shop, for instance, such a script
     could cause the user to unknowingly make arbitrarily many unwanted purchases.</p>

     <p>This is called a cross-site scripting attack.</p>

    </div>

    <p>There are many constructs that can be used to try to trick a site into executing code. Here
    are some that authors are encouraged to consider when writing safelist filters:</p>

    <ul><li>When allowing harmless-seeming elements like <code id=writing-secure-applications-with-html:the-img-element><a href=embedded-content.html#the-img-element>img</a></code>, it is important to safelist
     any provided attributes as well. If one allowed all attributes then an attacker could, for
     instance, use the <code id=writing-secure-applications-with-html:handler-onload><a href=webappapis.html#handler-onload>onload</a></code> attribute to run arbitrary
     script.<li>When allowing URLs to be provided (e.g. for links), the scheme of each URL also needs to be
     explicitly safelisted, as there are many schemes that can be abused. The most prominent
     example is "<code id=writing-secure-applications-with-html:the-javascript:-url-special-case><a href=browsing-the-web.html#the-javascript:-url-special-case>javascript:</a></code>", but user agents can
     implement (and indeed, have historically implemented) others.<li>Allowing a <code id=writing-secure-applications-with-html:the-base-element><a href=semantics.html#the-base-element>base</a></code> element to be inserted means any <code id=writing-secure-applications-with-html:the-script-element><a href=scripting.html#the-script-element>script</a></code> elements
     in the page with relative links can be hijacked, and similarly that any form submissions can
     get redirected to a hostile site.</ul>
   <dt>Cross-site request forgery (CSRF)<dd>
    <p>If a site allows a user to make form submissions with user-specific side-effects, for example
    posting messages on a forum under the user's name, making purchases, or applying for a passport,
    it is important to verify that the request was made by the user intentionally, rather than by
    another site tricking the user into making the request unknowingly.</p>

    <p>This problem exists because HTML forms can be submitted to other origins.</p>

    <p>Sites can prevent such attacks by populating forms with user-specific hidden tokens, or by
    checking `<code id=writing-secure-applications-with-html:http-origin><a data-x-internal=http-origin href=https://fetch.spec.whatwg.org/#http-origin>Origin</a></code>` headers on all requests.</p>
   <dt>Clickjacking<dd>
    <p>A page that provides users with an interface to perform actions that the user might not wish
    to perform needs to be designed so as to avoid the possibility that users can be tricked into
    activating the interface.</p>

    <p>One way that a user could be so tricked is if a hostile site places the victim site in a
    small <code id=writing-secure-applications-with-html:the-iframe-element><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code> and then convinces the user to click, for instance by having the user
    play a reaction game. Once the user is playing the game, the hostile site can quickly position
    the iframe under the mouse cursor just as the user is about to click, thus tricking the user
    into clicking the victim site's interface.</p>

    <p>To avoid this, sites that do not expect to be used in frames are encouraged to only enable
    their interface if they detect that they are not in a frame (e.g. by comparing the <code id=writing-secure-applications-with-html:dom-window><a href=nav-history-apis.html#dom-window>window</a></code> object to the value of the <code id=writing-secure-applications-with-html:dom-top><a href=nav-history-apis.html#dom-top>top</a></code>
    attribute).</p>
   </dl>


  <h4 id=common-pitfalls-to-avoid-when-using-the-scripting-apis><span class=secno>1.9.2</span> Common pitfalls to avoid when using the scripting APIs<a href=#common-pitfalls-to-avoid-when-using-the-scripting-apis class=self-link></a></h4>

  

  <p>Scripts in HTML have "run-to-completion" semantics, meaning that the browser will generally run
  the script uninterrupted before doing anything else, such as firing further events or continuing
  to parse the document.</p>

  <p>On the other hand, parsing of HTML files happens incrementally, meaning that
  the parser can pause at any point to let scripts run. This is generally a good thing, but it does
  mean that authors need to be careful to avoid hooking event handlers after the events could have
  possibly fired.</p>

  <p>There are two techniques for doing this reliably: use <a id=common-pitfalls-to-avoid-when-using-the-scripting-apis:event-handler-content-attributes href=webappapis.html#event-handler-content-attributes>event handler content
  attributes</a>, or create the element and add the event handlers in the same script. The latter
  is safe because, as mentioned earlier, scripts are run to completion before further events can
  fire.</p>

  <div class=example>

   <p>One way this could manifest itself is with <code id=common-pitfalls-to-avoid-when-using-the-scripting-apis:the-img-element><a href=embedded-content.html#the-img-element>img</a></code> elements and the <code id=common-pitfalls-to-avoid-when-using-the-scripting-apis:event-load><a href=indices.html#event-load>load</a></code> event. The event could fire as soon as the element has been
   parsed, especially if the image has already been cached (which is common).</p>

   <p>Here, the author uses the <code id=common-pitfalls-to-avoid-when-using-the-scripting-apis:handler-onload><a href=webappapis.html#handler-onload>onload</a></code> handler on an
   <code id=common-pitfalls-to-avoid-when-using-the-scripting-apis:the-img-element-2><a href=embedded-content.html#the-img-element>img</a></code> element to catch the <code id=common-pitfalls-to-avoid-when-using-the-scripting-apis:event-load-2><a href=indices.html#event-load>load</a></code> event:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;games.png&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;Games&quot;</c-> <c- e>onload</c-><c- o>=</c-><c- s>&quot;gamesLogoHasLoaded(event)&quot;</c-><c- p>&gt;</c-></code></pre>

   <p>If the element is being added by script, then so long as the event handlers are added in the
   same script, the event will still not be missed:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
 <c- a>var</c-> img <c- o>=</c-> <c- k>new</c-> Image<c- p>();</c->
 img<c- p>.</c->src <c- o>=</c-> <c- t>&apos;games.png&apos;</c-><c- p>;</c->
 img<c- p>.</c->alt <c- o>=</c-> <c- t>&apos;Games&apos;</c-><c- p>;</c->
 img<c- p>.</c->onload <c- o>=</c-> gamesLogoHasLoaded<c- p>;</c->
 <c- c1>// img.addEventListener(&apos;load&apos;, gamesLogoHasLoaded, false); // would work also</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

   <p>However, if the author first created the <code id=common-pitfalls-to-avoid-when-using-the-scripting-apis:the-img-element-3><a href=embedded-content.html#the-img-element>img</a></code> element and then in a separate
   script added the event listeners, there's a chance that the <code id=common-pitfalls-to-avoid-when-using-the-scripting-apis:event-load-3><a href=indices.html#event-load>load</a></code>
   event would be fired in between, leading it to be missed:</p>

   <pre class=bad><code class='html'><c- c>&lt;!-- Do not use this style, it has a race condition! --&gt;</c->
 <c- p>&lt;</c-><c- f>img</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;games&quot;</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;games.png&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;Games&quot;</c-><c- p>&gt;</c->
 <c- c>&lt;!-- the &apos;load&apos; event might fire here while the parser is taking a</c->
<c- c>      break, in which case you will not see it! --&gt;</c->
 <c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
  <c- a>var</c-> img <c- o>=</c-> document<c- p>.</c->getElementById<c- p>(</c-><c- t>&apos;games&apos;</c-><c- p>);</c->
  img<c- p>.</c->onload <c- o>=</c-> gamesLogoHasLoaded<c- p>;</c-> <c- c1>// might never fire!</c->
 <c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

  </div>



  <h4 id=how-to-catch-mistakes-when-writing-html:-validators-and-conformance-checkers><span class=secno>1.9.3</span> How to catch mistakes when writing HTML: validators and conformance checkers<a href=#how-to-catch-mistakes-when-writing-html:-validators-and-conformance-checkers class=self-link></a></h4>

  

  <p>Authors are encouraged to make use of conformance checkers (also known as <i>validators</i>) to
  catch common mistakes. The WHATWG maintains a list of such tools at: <a href=https://whatwg.org/validator/>https://whatwg.org/validator/</a></p>



  <h3 id=conformance-requirements-for-authors><span class=secno>1.10</span> Conformance requirements for authors<a href=#conformance-requirements-for-authors class=self-link></a></h3>

  

  <p>Unlike previous versions of the HTML specification, this specification defines in some detail
  the required processing for invalid documents as well as valid documents.</p> 

  <p>However, even though the processing of invalid content is in most cases well-defined,
  conformance requirements for documents are still important: in practice, interoperability (the
  situation in which all implementations process particular content in a reliable and identical or
  equivalent way) is not the only goal of document conformance requirements. This section details
  some of the more common reasons for still distinguishing between a conforming document and one
  with errors.</p>


  <h4 id=presentational-markup><span class=secno>1.10.1</span> Presentational markup<a href=#presentational-markup class=self-link></a></h4>

  

  <p>The majority of presentational features from previous versions of HTML are no longer allowed.
  Presentational markup in general has been found to have a number of problems:</p>

  <dl><dt>The use of presentational elements leads to poorer accessibility<dd>
    <p>While it is possible to use presentational markup in a way that provides users of assistive
    technologies (ATs) with an acceptable experience (e.g. using ARIA), doing so is significantly
    more difficult than doing so when using semantically-appropriate markup. Furthermore, even using
    such techniques doesn't help make pages accessible for non-AT non-graphical users, such as users
    of text-mode browsers.</p>

    <p>Using media-independent markup, on the other hand, provides an easy way for documents to be
    authored in such a way that they work for more users (e.g. users of text browsers).</p>
   <dt>Higher cost of maintenance<dd>
    <p>It is significantly easier to maintain a site written in such a way that the markup is
    style-independent. For example, changing the color of a site that uses <code>&lt;font color=""></code> throughout requires changes across the entire site,
    whereas a similar change to a site based on CSS can be done by changing a single file.</p>
   <dt>Larger document sizes<dd>
    <p>Presentational markup tends to be much more redundant, and thus results in larger document
    sizes.</p>
   </dl>

  <p>For those reasons, presentational markup has been removed from HTML in this version. This
  change should not come as a surprise; HTML4 deprecated presentational markup many years ago and
  provided a mode (HTML4 Transitional) to help authors move away from presentational markup; later,
  XHTML 1.1 went further and obsoleted those features altogether.</p>

  <p>The only remaining presentational markup features in HTML are the <code id=presentational-markup:attr-style><a href=dom.html#attr-style>style</a></code> attribute and the <code id=presentational-markup:the-style-element><a href=semantics.html#the-style-element>style</a></code> element. Use of the <code id=presentational-markup:attr-style-2><a href=dom.html#attr-style>style</a></code> attribute is somewhat discouraged in production environments, but
  it can be useful for rapid prototyping (where its rules can be directly moved into a separate
  style sheet later) and for providing specific styles in unusual cases where a separate style sheet
  would be inconvenient. Similarly, the <code id=presentational-markup:the-style-element-2><a href=semantics.html#the-style-element>style</a></code> element can be useful in syndication or
  for page-specific styles, but in general an external style sheet is likely to be more convenient
  when the styles apply to multiple pages.</p>

  <p>It is also worth noting that some elements that were previously presentational have been
  redefined in this specification to be media-independent: <code id=presentational-markup:the-b-element><a href=text-level-semantics.html#the-b-element>b</a></code>, <code id=presentational-markup:the-i-element><a href=text-level-semantics.html#the-i-element>i</a></code>,
  <code id=presentational-markup:the-hr-element><a href=grouping-content.html#the-hr-element>hr</a></code>, <code id=presentational-markup:the-s-element><a href=text-level-semantics.html#the-s-element>s</a></code>, <code id=presentational-markup:the-small-element><a href=text-level-semantics.html#the-small-element>small</a></code>, and <code id=presentational-markup:the-u-element><a href=text-level-semantics.html#the-u-element>u</a></code>.</p>


  <h4 id=syntax-errors><span class=secno>1.10.2</span> Syntax errors<a href=#syntax-errors class=self-link></a></h4>

  

  <p>The syntax of HTML is constrained to avoid a wide variety of problems.</p>

  <dl><dt>Unintuitive error-handling behavior<dd>
    <p>Certain invalid syntax constructs, when parsed, result in DOM trees that are highly
    unintuitive.</p>

    <div class=example>

     <p>For example, the following markup fragment results in a DOM with an <code id=syntax-errors:the-hr-element><a href=grouping-content.html#the-hr-element>hr</a></code> element
     that is an <em>earlier</em> sibling of the corresponding <code id=syntax-errors:the-table-element><a href=tables.html#the-table-element>table</a></code> element:</p>

     <pre class=bad><code class='html'><c- p>&lt;</c-><c- f>table</c-><c- p>&gt;&lt;</c-><c- f>hr</c-><c- p>&gt;</c->...</code></pre>

    </div>
   <dt>Errors with optional error recovery<dd>
    <p>To allow user agents to be used in controlled environments without having to implement the
    more bizarre and convoluted error handling rules, user agents are permitted to fail whenever
    encountering a <span>parse error</span>.</p>
   <dt>Errors where the error-handling behavior is not compatible with streaming user agents<dd>
    <p>Some error-handling behavior, such as the behavior for the <code>&lt;table>&lt;hr>...</code> example mentioned above, are incompatible with streaming
    user agents (user agents that process HTML files in one pass, without storing state). To avoid
    interoperability problems with such user agents, any syntax resulting in such behavior is
    considered invalid.</p>
   <dt>Errors that can result in infoset coercion<dd>
    <p>When a user agent based on XML is connected to an HTML parser, it is possible that certain
    invariants that XML enforces, such as element or attribute names never contain multiple colons,
    will be violated by an HTML file. Handling this can require that the parser coerce the HTML DOM
    into an XML-compatible infoset. Most syntax constructs that require such handling are considered
    invalid. (Comments containing two consecutive hyphens, or ending with a hyphen, are exceptions
    that are allowed in the HTML syntax.)</p>
   <dt>Errors that result in disproportionately poor performance<dd>
    <p>Certain syntax constructs can result in disproportionately poor performance. To discourage the
    use of such constructs, they are typically made non-conforming.</p>

    <div class=example>

     <p>For example, the following markup results in poor performance, since all the unclosed
     <code id=syntax-errors:the-i-element><a href=text-level-semantics.html#the-i-element>i</a></code> elements have to be reconstructed in each paragraph, resulting in progressively
     more elements in each paragraph:</p>

     <pre class=bad><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>i</c-><c- p>&gt;</c->She dreamt.
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>i</c-><c- p>&gt;</c->She dreamt that she ate breakfast.
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>i</c-><c- p>&gt;</c->Then lunch.
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>i</c-><c- p>&gt;</c->And finally dinner.</code></pre>

     <p>The resulting DOM for this fragment would be:</p>

     <ul class=domTree><li class=t1><code id=syntax-errors:the-p-element><a href=grouping-content.html#the-p-element>p</a></code><ul><li class=t1><code id=syntax-errors:the-i-element-2><a href=text-level-semantics.html#the-i-element>i</a></code><ul><li class=t3><code id=syntax-errors:text><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>#text</a></code>: <span>She dreamt.</span></ul></ul><li class=t1><code id=syntax-errors:the-p-element-2><a href=grouping-content.html#the-p-element>p</a></code><ul><li class=t1><code id=syntax-errors:the-i-element-3><a href=text-level-semantics.html#the-i-element>i</a></code><ul><li class=t1><code id=syntax-errors:the-i-element-4><a href=text-level-semantics.html#the-i-element>i</a></code><ul><li class=t3><code id=syntax-errors:text-2><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>#text</a></code>: <span>She dreamt that she ate breakfast.</span></ul></ul></ul><li class=t1><code id=syntax-errors:the-p-element-3><a href=grouping-content.html#the-p-element>p</a></code><ul><li class=t1><code id=syntax-errors:the-i-element-5><a href=text-level-semantics.html#the-i-element>i</a></code><ul><li class=t1><code id=syntax-errors:the-i-element-6><a href=text-level-semantics.html#the-i-element>i</a></code><ul><li class=t1><code id=syntax-errors:the-i-element-7><a href=text-level-semantics.html#the-i-element>i</a></code><ul><li class=t3><code id=syntax-errors:text-3><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>#text</a></code>: <span>Then lunch.</span></ul></ul></ul></ul><li class=t1><code id=syntax-errors:the-p-element-4><a href=grouping-content.html#the-p-element>p</a></code><ul><li class=t1><code id=syntax-errors:the-i-element-8><a href=text-level-semantics.html#the-i-element>i</a></code><ul><li class=t1><code id=syntax-errors:the-i-element-9><a href=text-level-semantics.html#the-i-element>i</a></code><ul><li class=t1><code id=syntax-errors:the-i-element-10><a href=text-level-semantics.html#the-i-element>i</a></code><ul><li class=t1><code id=syntax-errors:the-i-element-11><a href=text-level-semantics.html#the-i-element>i</a></code><ul><li class=t3><code id=syntax-errors:text-4><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>#text</a></code>: <span>And finally dinner.</span></ul></ul></ul></ul></ul></ul>

    </div>
   <dt>Errors involving fragile syntax constructs<dd>
    <p>There are syntax constructs that, for historical reasons, are relatively fragile. To help
    reduce the number of users who accidentally run into such problems, they are made
    non-conforming.</p>

    <div class=example>

     <p>For example, the parsing of certain named character references in attributes happens even
     with the closing semicolon being omitted. It is safe to include an ampersand followed by
     letters that do not form a named character reference, but if the letters are changed to a
     string that <em>does</em> form a named character reference, they will be interpreted as that
     character instead.</p>

     <p>In this fragment, the attribute's value is "<code>?bill&amp;ted</code>":</p>

     <pre class=bad><code class='html'><c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;?bill&amp;ted&quot;</c-><c- p>&gt;</c->Bill and Ted<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-></code></pre>

     <p>In the following fragment, however, the attribute's value is actually "<code>?art©</code>", <em>not</em> the intended "<code>?art&amp;copy</code>",
     because even without the final semicolon, "<code>&amp;copy</code>" is handled the same
     as "<code>&amp;copy;</code>" and thus gets interpreted as "<code>©</code>":</p>

     <pre class=bad><code class='html'><c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;?art&amp;copy&quot;</c-><c- p>&gt;</c->Art and Copy<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-></code></pre>

     <p>To avoid this problem, all named character references are required to end with a semicolon,
     and uses of named character references without a semicolon are flagged as errors.</p>

     <p>Thus, the correct way to express the above cases is as
     follows:</p>

     <pre><code class='html'><c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;?bill&amp;ted&quot;</c-><c- p>&gt;</c->Bill and Ted<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> <c- c>&lt;!-- &amp;ted is ok, since it&apos;s not a named character reference --&gt;</c-></code></pre>
     <pre><code class='html'><c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;?art&amp;amp;copy&quot;</c-><c- p>&gt;</c->Art and Copy<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> <c- c>&lt;!-- the &amp; has to be escaped, since &amp;copy </c-><em><c- c>is</c-></em><c- c> a named character reference --&gt;</c-></code></pre>

    </div>
   <dt>Errors involving known interoperability problems in legacy user agents<dd>
    <p>Certain syntax constructs are known to cause especially subtle or serious problems in legacy
    user agents, and are therefore marked as non-conforming to help authors avoid them.</p>

    <div class=example>

     <p>For example, this is why the U+0060 GRAVE ACCENT character (`) is not allowed in unquoted
     attributes. In certain legacy user agents,  it is sometimes treated as a
     quote character.</p>

    </div>

    <div class=example>

     <p>Another example of this is the DOCTYPE, which is required to trigger <a id=syntax-errors:no-quirks-mode href=https://dom.spec.whatwg.org/#concept-document-no-quirks data-x-internal=no-quirks-mode>no-quirks
     mode</a>, because the behavior of legacy user agents in <a id=syntax-errors:quirks-mode href=https://dom.spec.whatwg.org/#concept-document-quirks data-x-internal=quirks-mode>quirks mode</a> is often
     largely undocumented.</p>

    </div>
   <dt>Errors that risk exposing authors to security attacks<dd>
    <p>Certain restrictions exist purely to avoid known security problems.</p>

    <div class=example>

     <p>For example, the restriction on using UTF-7 exists purely to avoid authors falling prey to a
     known cross-site-scripting attack using UTF-7. <a href=references.html#refsUTF7>[UTF7]</a></p>

    </div>
   <dt>Cases where the author's intent is unclear<dd>
    <p>Markup where the author's intent is very unclear is often made non-conforming. Correcting
    these errors early makes later maintenance easier.</p>

    <div class=example>

     <p>For example, it is unclear whether the author intended the following to be an
     <code id=syntax-errors:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code> heading or an <code id=syntax-errors:the-h1,-h2,-h3,-h4,-h5,-and-h6-elements-2><a href=sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h2</a></code> heading:</p>

     <pre class=bad><code class='html'><c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->Contact details<c- p>&lt;/</c-><c- f>h2</c-><c- p>&gt;</c-></code></pre>

    </div>
   <dt>Cases that are likely to be typos<dd>
    <p>When a user makes a simple typo, it is helpful if the error can be caught early, as this can
    save the author a lot of debugging time. This specification therefore usually considers it an
    error to use element names, attribute names, and so forth, that do not match the names defined
    in this specification.</p>

    <div class=example>

     <p>For example, if the author typed <code>&lt;capton></code> instead of <code>&lt;caption></code>, this would be flagged as an error and the author could correct
     the typo immediately.</p>

    </div>
   <dt>Errors that could interfere with new syntax in the future<dd>
    <p>In order to allow the language syntax to be extended in the future, certain otherwise
    harmless features are disallowed.</p>

    <div class=example>

     <p>For example, "attributes" in end tags are ignored currently, but they are invalid, in case a
     future change to the language makes use of that syntax feature without conflicting with
     already-deployed (and valid!) content.</p>

    </div>
   </dl>

  <p>Some authors find it helpful to be in the practice of always quoting all attributes and always
  including all optional tags, preferring the consistency derived from such custom over the minor
  benefits of terseness afforded by making use of the flexibility of the HTML syntax. To aid such
  authors, conformance checkers can provide modes of operation wherein such conventions are
  enforced.</p>



  <h4 id=restrictions-on-content-models-and-on-attribute-values><span class=secno>1.10.3</span> Restrictions on content models and on attribute values<a href=#restrictions-on-content-models-and-on-attribute-values class=self-link></a></h4>

  

  <p>Beyond the syntax of the language, this specification also places restrictions on how elements
  and attributes can be specified. These restrictions are present for similar reasons:</p>

  <dl><dt>Errors involving content with dubious semantics<dd>
    <p>To avoid misuse of elements with defined meanings, content models are defined that restrict
    how elements can be nested when such nestings would be of dubious value.</p>

    <p class=example>For example, this specification disallows nesting a <code id=restrictions-on-content-models-and-on-attribute-values:the-section-element><a href=sections.html#the-section-element>section</a></code>
    element inside a <code id=restrictions-on-content-models-and-on-attribute-values:the-kbd-element><a href=text-level-semantics.html#the-kbd-element>kbd</a></code> element, since it is highly unlikely for an author to indicate
    that an entire section should be keyed in.</p>
   <dt>Errors that involve a conflict in expressed semantics<dd>
    <p>Similarly, to draw the author's attention to mistakes in the use of elements, clear
    contradictions in the semantics expressed are also considered conformance errors.</p>

    <div class=example>

     <p>In the fragments below, for example, the semantics are nonsensical: a separator cannot
     simultaneously be a cell, nor can a radio button be a progress bar.</p>

     <pre class=bad><code class='html'><c- p>&lt;</c-><c- f>hr</c-> <c- e>role</c-><c- o>=</c-><c- s>&quot;cell&quot;</c-><c- p>&gt;</c-></code></pre>
     <pre class=bad><code class='html'><c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>radio</c-> <c- e>role</c-><c- o>=</c-><c- s>progressbar</c-><c- p>&gt;</c-></code></pre>

    </div>

    <p class=example>Another example is the restrictions on the content models of the
    <code id=restrictions-on-content-models-and-on-attribute-values:the-ul-element><a href=grouping-content.html#the-ul-element>ul</a></code> element, which only allows <code id=restrictions-on-content-models-and-on-attribute-values:the-li-element><a href=grouping-content.html#the-li-element>li</a></code> element children. Lists by definition
    consist just of zero or more list items, so if a <code id=restrictions-on-content-models-and-on-attribute-values:the-ul-element-2><a href=grouping-content.html#the-ul-element>ul</a></code> element contains something
    other than an <code id=restrictions-on-content-models-and-on-attribute-values:the-li-element-2><a href=grouping-content.html#the-li-element>li</a></code> element, it's not clear what was meant.</p>
   <dt>Cases where the default styles are likely to lead to confusion<dd>
    <p>Certain elements have default styles or behaviors that make certain combinations likely to
    lead to confusion. Where these have equivalent alternatives without this problem, the confusing
    combinations are disallowed.</p>

    <p class=example>For example, <code id=restrictions-on-content-models-and-on-attribute-values:the-div-element><a href=grouping-content.html#the-div-element>div</a></code> elements are rendered as <a href=https://drafts.csswg.org/css2/#block-boxes%E2%91%A0 id=restrictions-on-content-models-and-on-attribute-values:block-box data-x-internal=block-box>block boxes</a>, and <code id=restrictions-on-content-models-and-on-attribute-values:the-span-element><a href=text-level-semantics.html#the-span-element>span</a></code> elements as <a href=https://drafts.csswg.org/css2/#inline-box id=restrictions-on-content-models-and-on-attribute-values:inline-box data-x-internal=inline-box>inline boxes</a>. Putting a <a id=restrictions-on-content-models-and-on-attribute-values:block-box-2 href=https://drafts.csswg.org/css2/#block-boxes%E2%91%A0 data-x-internal=block-box>block box</a> in an
    <a id=restrictions-on-content-models-and-on-attribute-values:inline-box-2 href=https://drafts.csswg.org/css2/#inline-box data-x-internal=inline-box>inline box</a> is unnecessarily confusing; since either nesting just <code id=restrictions-on-content-models-and-on-attribute-values:the-div-element-2><a href=grouping-content.html#the-div-element>div</a></code>
    elements, or nesting just <code id=restrictions-on-content-models-and-on-attribute-values:the-span-element-2><a href=text-level-semantics.html#the-span-element>span</a></code> elements, or nesting <code id=restrictions-on-content-models-and-on-attribute-values:the-span-element-3><a href=text-level-semantics.html#the-span-element>span</a></code> elements
    inside <code id=restrictions-on-content-models-and-on-attribute-values:the-div-element-3><a href=grouping-content.html#the-div-element>div</a></code> elements all serve the same purpose as nesting a <code id=restrictions-on-content-models-and-on-attribute-values:the-div-element-4><a href=grouping-content.html#the-div-element>div</a></code>
    element in a <code id=restrictions-on-content-models-and-on-attribute-values:the-span-element-4><a href=text-level-semantics.html#the-span-element>span</a></code> element, but only the latter involves a <a id=restrictions-on-content-models-and-on-attribute-values:block-box-3 href=https://drafts.csswg.org/css2/#block-boxes%E2%91%A0 data-x-internal=block-box>block box</a> in
    an <a id=restrictions-on-content-models-and-on-attribute-values:inline-box-3 href=https://drafts.csswg.org/css2/#inline-box data-x-internal=inline-box>inline box</a>, the latter combination is disallowed.</p>

    <p class=example>Another example would be the way <a id=restrictions-on-content-models-and-on-attribute-values:interactive-content-2 href=dom.html#interactive-content-2>interactive content</a> cannot be
    nested. For example, a <code id=restrictions-on-content-models-and-on-attribute-values:the-button-element><a href=form-elements.html#the-button-element>button</a></code> element cannot contain a <code id=restrictions-on-content-models-and-on-attribute-values:the-textarea-element><a href=form-elements.html#the-textarea-element>textarea</a></code>
    element. This is because the default behavior of such nesting interactive elements would be
    highly confusing to users. Instead of nesting these elements, they can be placed side by
    side.</p>
   <dt>Errors that indicate a likely misunderstanding of the specification<dd>
    <p>Sometimes, something is disallowed because allowing it would likely cause author
    confusion.</p>

    <p class=example>For example, setting the <code id=restrictions-on-content-models-and-on-attribute-values:attr-fe-disabled><a href=form-control-infrastructure.html#attr-fe-disabled>disabled</a></code>
    attribute to the value "<code>false</code>" is disallowed, because despite the
    appearance of meaning that the element is enabled, it in fact means that the element is
    <em>disabled</em> (what matters for implementations is the presence of the attribute, not its
    value).</p>
   <dt>Errors involving limits that have been imposed merely to simplify the language<dd>
    <p>Some conformance errors simplify the language that authors need to learn.</p>

    <p class=example>For example, the <code id=restrictions-on-content-models-and-on-attribute-values:the-area-element><a href=image-maps.html#the-area-element>area</a></code> element's <code id=restrictions-on-content-models-and-on-attribute-values:attr-area-shape><a href=image-maps.html#attr-area-shape>shape</a></code> attribute, despite accepting both <code>circ</code> and <code id=restrictions-on-content-models-and-on-attribute-values:attr-area-shape-keyword-circle><a href=image-maps.html#attr-area-shape-keyword-circle>circle</a></code> values in practice as synonyms, disallows
    the use of the <code>circ</code> value, so as to simplify
    tutorials and other learning aids. There would be no benefit to allowing both, but it would
    cause extra confusion when teaching the language.</p>
   <dt>Errors that involve peculiarities of the parser<dd>
    <p>Certain elements are parsed in somewhat eccentric ways (typically for historical reasons),
    and their content model restrictions are intended to avoid exposing the author to these
    issues.</p>

    <div class=example>

     <p>For example, a <code id=restrictions-on-content-models-and-on-attribute-values:the-form-element><a href=forms.html#the-form-element>form</a></code> element isn't allowed inside <a id=restrictions-on-content-models-and-on-attribute-values:phrasing-content-2 href=dom.html#phrasing-content-2>phrasing content</a>,
     because when parsed as HTML, a <code id=restrictions-on-content-models-and-on-attribute-values:the-form-element-2><a href=forms.html#the-form-element>form</a></code> element's start tag will imply a
     <code id=restrictions-on-content-models-and-on-attribute-values:the-p-element><a href=grouping-content.html#the-p-element>p</a></code> element's end tag. Thus, the following markup results in two <a href=dom.html#paragraph id=restrictions-on-content-models-and-on-attribute-values:paragraph>paragraphs</a>, not one:</p>

     <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Welcome. <c- p>&lt;</c-><c- f>form</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Name:<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-><c- p>&gt;&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>

     <p>It is parsed exactly like the following:</p>

     <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Welcome. <c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>form</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;</c->Name:<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>input</c-><c- p>&gt;&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>

    </div>
   <dt>Errors that would likely result in scripts failing in hard-to-debug ways<dd>
    <p>Some errors are intended to help prevent script problems that would be hard to debug.</p>

    <p class=example>This is why, for instance, it is non-conforming to have two <code id=restrictions-on-content-models-and-on-attribute-values:the-id-attribute><a href=dom.html#the-id-attribute>id</a></code> attributes with the same value. Duplicate IDs lead to the wrong
    element being selected, with sometimes disastrous effects whose cause is hard to determine.</p>
   <dt>Errors that waste authoring time<dd>
    <p>Some constructs are disallowed because historically they have been the cause of a lot of
    wasted authoring time, and by encouraging authors to avoid making them, authors can save time in
    future efforts.</p>

    <p class=example>For example, a <code id=restrictions-on-content-models-and-on-attribute-values:the-script-element><a href=scripting.html#the-script-element>script</a></code> element's <code id=restrictions-on-content-models-and-on-attribute-values:attr-script-src><a href=scripting.html#attr-script-src>src</a></code> attribute causes the element's contents to be ignored.
    However, this isn't obvious, especially if the element's contents appear to be executable script
    — which can lead to authors spending a lot of time trying to debug the inline script
    without realizing that it is not executing. To reduce this problem, this specification makes it
    non-conforming to have executable script in a <code id=restrictions-on-content-models-and-on-attribute-values:the-script-element-2><a href=scripting.html#the-script-element>script</a></code> element when the <code id=restrictions-on-content-models-and-on-attribute-values:attr-script-src-2><a href=scripting.html#attr-script-src>src</a></code> attribute is present. This means that authors who are
    validating their documents are less likely to waste time with this kind of mistake.</p>
   <dt>Errors that involve areas that affect authors migrating between the HTML and XML
   syntaxes<dd>
    <p>Some authors like to write files that can be interpreted as both XML and HTML with similar
    results. Though this practice is discouraged in general due to the myriad of subtle
    complications involved (especially when involving scripting, styling, or any kind of automated
    serialization), this specification has a few restrictions intended to at least somewhat mitigate
    the difficulties. This makes it easier for authors to use this as a transitionary step when
    migrating between the HTML and XML syntaxes.</p>

    <p class=example>For example, there are somewhat complicated rules surrounding the <code id=restrictions-on-content-models-and-on-attribute-values:attr-lang><a href=dom.html#attr-lang>lang</a></code> and <code id=restrictions-on-content-models-and-on-attribute-values:attr-xml-lang><a data-x-internal=attr-xml-lang href=https://www.w3.org/TR/xml/#sec-lang-tag>xml:lang</a></code> attributes
    intended to keep the two synchronized.</p>

    <p class=example>Another example would be the restrictions on the values of <code>xmlns</code> attributes in the HTML serialization, which are intended to ensure that
    elements in conforming documents end up in the same namespaces whether processed as HTML or
    XML.</p>
   <dt>Errors that involve areas reserved for future expansion<dd>
    <p>As with the restrictions on the syntax intended to allow for new syntax in future revisions
    of the language, some restrictions on the content models of elements and values of attributes
    are intended to allow for future expansion of the HTML vocabulary.</p>

    <p class=example>For example, limiting the values of the <code id=restrictions-on-content-models-and-on-attribute-values:attr-hyperlink-target><a href=links.html#attr-hyperlink-target>target</a></code> attribute that start with an U+005F LOW LINE
    character (_) to only specific predefined values allows new predefined values to be introduced
    at a future time without conflicting with author-defined values.</p>
   <dt>Errors that indicate a mis-use of other specifications<dd>
    <p>Certain restrictions are intended to support the restrictions made by other
    specifications.</p>

    <p class=example>For example, requiring that attributes that take media query lists use only
    <em>valid</em> media query lists reinforces the importance of following the conformance rules of
    that specification.</p>
   </dl>



  <h3 id=suggested-reading><span class=secno>1.11</span> Suggested reading<a href=#suggested-reading class=self-link></a></h3>

  

  <p>The following documents might be of interest to readers of this specification.</p>

  <dl><dt><cite>Character Model for the World Wide Web 1.0: Fundamentals</cite> <a href=references.html#refsCHARMOD>[CHARMOD]</a><dd><blockquote><p>This Architectural Specification provides authors of specifications, software
   developers, and content developers with a common reference for interoperable text manipulation on
   the World Wide Web, building on the Universal Character Set, defined jointly by the Unicode
   Standard and ISO/IEC 10646. Topics addressed include use of the terms 'character', 'encoding' and
   'string', a reference processing model, choice and identification of character encodings,
   character escaping, and string indexing.</blockquote><dt><cite>Unicode Security Considerations</cite> <a href=references.html#refsUTR36>[UTR36]</a><dd><blockquote><p>Because Unicode contains such a large number of characters and incorporates
   the varied writing systems of the world, incorrect usage can expose programs or systems to
   possible security attacks. This is especially important as more and more products are
   internationalized. This document describes some of the security considerations that programmers,
   system analysts, standards developers, and users should take into account, and provides specific
   recommendations to reduce the risk of problems.</blockquote><dt><cite>Web Content Accessibility Guidelines (WCAG)</cite> <a href=references.html#refsWCAG>[WCAG]</a><dd><blockquote><p>Web Content Accessibility Guidelines (WCAG) covers a wide range of
   recommendations for making web content more accessible. Following these guidelines will make
   content accessible to a wider range of people with disabilities, including blindness and low
   vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited
   movement, speech disabilities, photosensitivity and combinations of these. Following these
   guidelines will also often make your web content more usable to users in
   general.</blockquote></dl>



  <nav><a href=index.html>Table of Contents</a> — <a href=infrastructure.html>2 Common infrastructure →</a></nav>
